import React, {PureComponent} from 'react';
import {connect} from 'react-redux';
import {Button, Card, Icon, notification, Table} from 'antd';
import {Pie} from '@ant-design/charts';
import {carrierOrderQuery, carrierPriceQuery, clientCountQuery, clientPriceQuery} from "./actions";
import FilterForm from "../../components/FilterForm";
import {DATE_FORMAT} from "../../lib/func";
import moment from "moment";
import {tableProps} from "../../lib/ui";
import {getLastFilter, saveLastFilter} from "../../lib/identity";

const LAST_FILTER = "priceAnalysis";

class BusinessAnalysis extends PureComponent {
    componentDidMount() {
        const {dispatch} = this.props;
        let fields = getLastFilter(LAST_FILTER);
        if (fields === null || fields === undefined) {
            fields = {};
        }
        dispatch(clientCountQuery({...fields}));
        dispatch(clientPriceQuery({...fields}));
        dispatch(carrierOrderQuery({...fields}));
        dispatch(carrierPriceQuery({...fields}));
    }

    state = {
        createTimeRange: [moment().startOf('month'), moment().endOf('month')],
        createTimeRange2: [moment().startOf('month'), moment().endOf('month')],
        createTimeStart1: undefined,
        createTimeStart2: undefined,
        createTimeEnd1: undefined,
        createTimeEnd2: undefined
    };
    handleSearch = (values) => {
        const {dispatch} = this.props;
        let fields = values;
        this.setState({createTimeRange: values.createTimeRange});
        if (fields.createTimeRange && fields.createTimeRange.length > 1) {
            fields.createTimeStart = fields.createTimeRange[0].format(DATE_FORMAT);
            fields.createTimeEnd = fields.createTimeRange[1].format(DATE_FORMAT);
            this.setState({createTimeStart1: fields.createTimeStart, createTimeEnd1: fields.createTimeEnd});
            delete fields.createTimeRange;
        }
        saveLastFilter(LAST_FILTER, {...fields});
        dispatch(clientCountQuery({...fields}));
        dispatch(clientPriceQuery({...fields}));
    };
    handleSearchLine = (values) => {
        const {dispatch} = this.props;
        let fields = values;
        this.setState({createTimeRange2: values.createTimeRange2});
        if (fields.createTimeRange2 && fields.createTimeRange2.length > 1) {
            fields.createTimeStart = fields.createTimeRange2[0].format(DATE_FORMAT);
            fields.createTimeEnd = fields.createTimeRange2[1].format(DATE_FORMAT);
            this.setState({createTimeStart2: fields.createTimeStart, createTimeEnd2: fields.createTimeEnd});
            delete fields.createTimeRange2;
        }
        saveLastFilter(LAST_FILTER, {...fields});
        dispatch(carrierOrderQuery({...fields}));
        dispatch(carrierPriceQuery({...fields}));
    };

    handleExport = () => {
        document.getElementById("exportClient").submit();
        notification.success({
            message: '请等待文件导出'
        });
    };
    handleLineExport = () => {
        document.getElementById("exportCarrier").submit();
        notification.success({
            message: '请等待文件导出'
        });
    };

    render() {
        const {
            clientLineData, clientOrderCount, carrierOrderCount, carrierLineData
        } = this.props;
        let fields = getLastFilter(LAST_FILTER);
        if (fields === null || fields === undefined) {
            fields = {};
        }
        const filterSchema = [
            {
                key: 'createTimeRange',
                field: 'createTimeRange',
                type: 'dateRangePicker',
                expandable: true,
                title: '发车日期',
                fieldOptions: {
                    initialValue: this.state.createTimeRange || fields.createTimeRange
                }
            }
        ];
        const filterSchema2 = [
            {
                key: 'createTimeRange2',
                field: 'createTimeRange2',
                type: 'dateRangePicker',
                expandable: true,
                title: '发车日期',
                fieldOptions: {
                    initialValue: this.state.createTimeRange2 || fields.createTimeRange2
                }
            }
        ];
        const orderCountDataConfig = {
            appendPadding: 10,
            data: clientOrderCount,
            angleField: 'count',
            colorField: 'name',
            radius: 0.9,
            label: {
                type: 'inner',
                offset: '-30%',
                content: function content(_ref) {
                    var percent = _ref.percent;
                    return ''.concat((percent * 100).toFixed(0), '%');
                },
                style: {
                    fontSize: 14,
                    textAlign: 'center',
                },
            },
            interactions: [{type: 'element-active'}],
        };
        const orderCountDataConfig2 = {
            appendPadding: 10,
            data: carrierOrderCount,
            angleField: 'count',
            colorField: 'name',
            radius: 0.9,
            label: {
                type: 'inner',
                offset: '-30%',
                content: function content(_ref) {
                    var percent = _ref.percent;
                    return ''.concat((percent * 100).toFixed(0), '%');
                },
                style: {
                    fontSize: 14,
                    textAlign: 'center',
                },
            },
            interactions: [{type: 'element-active'}],
        };

        const carrierLineConfig = {
            title: {
                visible: true,
                text: '多折线图',
            },
            description: {
                visible: true,
                text: '通过回调函数指定折线颜色',
            },
            padding: 'auto',
            forceFit: true,
            data: carrierLineData,
            xField: 'line',
            yField: 'price',
            seriesField: 'name',
            responsive: true,
        };
        const clientLineConfig = {
            title: {
                visible: true,
                text: '多折线图',
            },
            description: {
                visible: true,
                text: '通过回调函数指定折线颜色',
            },
            padding: 'auto',
            forceFit: true,
            data: clientLineData,
            xField: 'line',
            yField: 'price',
            seriesField: 'name',
            responsive: true,
        };

        const lineColumns = [
            {
                title: "客户",
                dataIndex: "name",
                width: "180px"
            }, {
                title: "业务类型",
                dataIndex: "business",
                width: "180px"
            }, {
                title: "计费方式",
                dataIndex: "calculateType",
                width: "180px"
            }, {
                title: "线路",
                dataIndex: "line",
                width: "180px"
            }, {
                title: "费用科目",
                dataIndex: "feeName",
                width: "180px"
            }, {
                title: "币种",
                dataIndex: "currency",
                width: "180px"
            }, {
                title: "单价",
                dataIndex: "price",
                width: "180px"
            }, {
                title: "",
                dataIndex: ""
            }
        ];
        const lineColumns2 = [
            {
                title: "供应商",
                dataIndex: "name",
                width: "180px"
            }, {
                title: "业务类型",
                dataIndex: "business",
                width: "180px"
            }, {
                title: "计费方式",
                dataIndex: "calculateType",
                width: "180px"
            }, {
                title: "线路",
                dataIndex: "line",
                width: "180px"
            }, {
                title: "费用科目",
                dataIndex: "feeName",
                width: "180px"
            }, {
                title: "币种",
                dataIndex: "currency",
                width: "180px"
            }, {
                title: "单价",
                dataIndex: "price",
                width: "180px"
            }, {
                title: "",
                dataIndex: ""
            }
        ];

        return (
            <div>
                <div style={{width: "50%", float: 'left'}}>
                    <FilterForm schema={filterSchema} callback={this.handleSearch}/>
                    <Button onClick={this.handleExport}><Icon type="export"/>导 出</Button>
                    <div style={{padding: '10px'}}>
                        <Card title={"客户业务量情况"} bordered={false} style={{height: "500px", width: "100%"}}>
                            <Pie {...orderCountDataConfig} />
                        </Card>
                    </div>
                    <Card style={{width: "98%", marginLeft: "9px"}}>
                        {/*<Line {...clientLineConfig} />*/}
                        <Table
                            {...tableProps}
                            scroll={{x: 800}}
                            columns={lineColumns}
                            dataSource={clientLineData}
                            pagination={false}
                        />
                    </Card>
                </div>
                <div style={{width: "50%", float: 'left'}}>
                    <FilterForm schema={filterSchema2} callback={this.handleSearchLine}/>
                    <Button onClick={this.handleLineExport}><Icon type="export"/>导 出</Button>
                    <div style={{padding: '10px'}}>
                        <Card title={"供应商业务量情况"} bordered={false} style={{height: "500px", width: "100%"}}>
                            <Pie {...orderCountDataConfig2} />
                        </Card>
                    </div>
                    <Card style={{width: "98%", marginLeft: "9px"}}>
                        {/*<Line {...carrierLineConfig} />*/}
                        <Table
                            {...tableProps}
                            scroll={{x: 800}}
                            columns={lineColumns2}
                            dataSource={carrierLineData}
                            pagination={false}
                        />
                    </Card>
                </div>
                <form
                    id="exportClient"
                    method="post"
                    target="_blank"
                    action="/api/orderAnalysis/exportClient"
                >
                    <input
                        name="createDateStart"
                        type="hidden"
                        value={this.state.createDateStart1}
                    />
                    <input
                        name="createDateEnd"
                        type="hidden"
                        value={this.state.createDateEnd1}
                    />
                </form>
                <form
                    id="exportCarrier"
                    method="post"
                    target="_blank"
                    action="/api/orderAnalysis/exportCarrier"
                >
                    <input
                        name="createDateStart"
                        type="hidden"
                        value={this.state.createDateStart2}
                    />
                    <input
                        name="createDateEnd"
                        type="hidden"
                        value={this.state.createDateEnd2}
                    />
                </form>
            </div>
        );
    }
}

const mapStateToProps = state => {
    return {
        ...state.priceAnalysis
    };
};

export default connect(mapStateToProps)(BusinessAnalysis);
